|
点击全选按钮，选择中所有商品，并显示所有商品累计的总金额
1. 给对应商品前面的checkbox添加change事件，代码如下： $("#tbProduct").on('change',"input[type='checkbox']", function() {
var checked = $(this).prop("checked");
var total = Number($("#spanTotal").text());
var sub = Number($(this).parent().parent().find(".sub").text());
if(checked){
total += sub;
}else{
total -=sub;
}
$("#spanTotal").text(total);
//是否选中全选
// 有一个没有选中，就全选按钮就不能选中
var checkArr = $("#tbProduct input[type='checkbox']");
var all = true;
for(var i=0;i<checkArr.length;i++) {
if(!$(checkArr<i>).prop('checked')){
//如果有一个是false
all=false;
break;
}
}
$("#checkAll").prop('checked',all);
})</i>2. 点击“全选” 按钮，所有商品一起选中或取消 注：金额要根据着一起改变，这里经常会出现一个bug , 就是checkbox的选中改变了，但是金额，并没有变化 即checkbox 的选中状态改了，并没有触发change事件。 解决方案： 自己调用change() 方法，触发change事件 代码如下： $("#checkAll").click(function () {
var checked = $(this).prop('checked');
var checkArr = $("#tbProduct input[type='checkbox']");
for(var i=0;i<checkArr.length;i++){
var nowCheck = $(checkArr<i>).prop('checked');
if(nowCheck!=checked){
$(checkArr<i>).prop('checked',checked);
$(checkArr<i>).change();
}
}
})</i></i></i>如果，商品前的checkbox与全选按钮的状态不一致，则改变状态的值，并手动调用 change() 方法 注：change() 方法只有jquery对象才有，dom对象没有 转载，请注明出处 bug收集 网址：http://bugshouji.com/shareweb/t1319 |
|
|
公众号
